<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="1" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.gray-bg {
	background: #f5f5f5
}

.banner {
	width: 100%
}

.banner img {
	width: 100%
}

.service .tab {
	overflow: hidden;
	margin-top: 25px;
}

.service .tab li {
	margin-right: 25px;
	float: left;
	cursor: pointer;
	position: relative;
	height: 35px;
	line-height: 35px;
	font-size: 16px;
	padding: 0 35px;
	text-align: center;
	background: #ffffff;
	color: #555555;
	border-radius: 6px;
}
.service .tab li:hover{background: #c18a3c;
	color: #ffffff;}
.service .tab li.active {
	background: #c18a3c;
	color: #ffffff;
}

.service .tab li:last-of-type {
	
}

.service .tab li img {
	display: block;
	margin: 0px auto;
	padding: 20px 0;
}

.service .tab li:nth-of-type(3) img {
	padding: 15px 0
}

.tab-content {
	margin-top: 25px;
	padding-top: 50px;
	padding-bottom: 130px;
	overflow: hidden;
	background: #ffffff
}

.tab-content .con1 li {
	cursor: pointer;
	margin-bottom: 5px;
	border: 1px solid #c18a3c;
	border-radius: 6px;
	position: relative;
	float: left;
	width: 165px;
	height: 238px;
	overflow: hidden;
	margin-right: 5px;
}

.tab-content .con1 li:nth-of-type(5) {
	width: 330px;
	margin-right: 0;
}

.tab-content li img {
	border-radius: 6px;
	width: 100%;
	height: 100%;
}

.tab-content .con1 li .txt {
	position: absolute;
	left: 50%;
	bottom: 10px;
	background: rgba(188, 141, 74, 0.8);
	color: #ffffff;
	width: 150px;
	height: 65px;
	margin-left: -75px;
	border-radius: 4px;
	text-align: center
}

.tab-content .con1 li:nth-of-type(5) .txt {
	width: 300px;
	margin-left: -150px;
}

.tab-content li .txt span {
	display: block
}

.tab-content li .txt .name {
	margin-top: 5px;
}

.tab-content li .txt .line {
	height: 1px;
	width: 20px;
	margin: 5px auto;
	background: #ffffff
}

.tab-content li .txt .money {
	font-size: 13px;
}

.tab-content .con2 li {
	cursor: pointer;
	margin-bottom: 5px;
	border: 1px solid #c18a3c;
	border-radius: 6px;
	position: relative;
	float: left;
	width: 330px;
	height: 238px;
	overflow: hidden;
	margin-right: 5px;
}

.tab-content .con2 li:last-of-type {
	margin-right: 0px;
}

.tab-content .con2 li .txt {
	position: absolute;
	left: 50%;
	bottom: 10px;
	background: rgba(188, 141, 74, 0.8);
	color: #ffffff;
	width: 300px;
	height: 65px;
	margin-left: -150px;
	border-radius: 4px;
	text-align: center
}
.tab-content .con1 li .txt:hover,.tab-content .con2 li .txt:hover{background: rgba(188, 141, 74, 0.9);}

.tab-content .con2, .tab-content .con3 {
	display: none
}

.tab-content .con1, .tab-content .con2 {
	overflow: hidden
}
.menu-wrap{    position: relative;}
.menu{position: absolute;z-index: 23;padding-top:12px;display:none;}
.business-wrap{position: absolute;left:175px;top:11px;height:432px;}
</style>
</head>
<body class="">
<div id="app" >
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="container menu-wrap wrap-box">
		<ul class="menu">
			<cms:ad var="items" code="ywfl"></cms:ad>
			<c:forEach var="item" items="${items }">
				<li  @mouseover="selectAd('${item.adUrl }')"><a href="${item.adUrl }" target="blank"><img
						src="${item.adImg }" alt="">${item.adTitle }</a></li>
			</c:forEach>
		</ul>
		<div class="business-wrap">
           <div class="business-list" v-for="item in ads">
               <div class="img-box"><img :src="item.adImg" alt=""></div>
               <div>
                   <h4><a href="">{{item.adTitle}}</a></h4>
                   <div class="business-list-link">
                      {{item.adInfo1}}
                   </div>
                   <div class="btns"><a :href="item.adUrl">在线咨询</a><a target="blank" :href="item.adUrl">查看详情</a></div>
               </div>
           </div>
       </div>

		
	</div>
	<div class="banner">
		<cms:ad var="banner" code="sbanner" multi="false"></cms:ad>
		<img src="${banner.adImg}" alt="">
	</div>

	<div class="gray-bg" >
		<div class="container">
			<div class="service">
				<ul class="tab">
					<li class="active">记账+办证</li>
					<li>执照许可证</li>
					<li>报告+注销/注册</li>
				</ul>

			</div>
		</div>
		<div class="tab-content">

			<div class="container">

				<ul class="con1">
					<li v-for="item in jzbz" @click="toArticle(item.artId)" ><img :src="item.artImage" alt="">
						<div class="txt">
							<span class="name">{{item.artTitle }}</span> <span class="line"></span>
							<span class="money">{{item.artAbstract }}</span>
						</div></li>
				</ul>
				<ul class="con2" >
					<li v-for="item in zzxkz"  @click="toArticle(item.artId)"><img :src="item.artImage" alt="">
						<div class="txt">
							<span class="name">{{item.artTitle }}</span> <span class="line"></span>
							<span class="money">{{item.artAbstract }}</span>
						</div></li>
				</ul>
				<ul class="con2 con3">
					<li v-for="item in bgzx" @click="toArticle(item.artId)" ><img :src="item.artImage" alt="">
						<div class="txt">
							<span class="name">{{item.artTitle }}</span> <span class="line"></span>
							<span class="money">{{item.artAbstract }}</span>
						</div></li>
				</ul>
			</div>
		</div>
		<jsp:include page="_foot.jsp"></jsp:include>
	</div>
	</div>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/visitor/index.js"></script>
<script>
	var app = new Vue({
		el : '#app',
		data : {
			offset : 0,
			limit : 100,
			jzbz : [],
			ads:[],
			zzxkz : [],
			bgzx : []
		},
		filters : {
			getYear : function(value) {
				var data = new Date(value);
				return data.getFullYear();
			}
		},
		methods : {
			toArticle : function(id) {
				window.open("${path}/redirect/serviceDetails?id=" + id);
			},
			selectAd:function(code){
				$.AjaxProxy({
					c : false,
					p : {
						"code" : code
					}
				}).invoke("${path}/findAd", function(loj) {
					app.ads = loj.getValue("rows");
				});
			},
			loadOtherArt : function() {
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 100,
						"code" : "jzbz"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.jzbz = loj.getValue("rows");
				});
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 100,
						"code" : "zzxkz"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.zzxkz = loj.getValue("rows");
				});
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 100,
						"code" : "bgzx"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.bgzx = loj.getValue("rows");
				});
				
			}
		},
	});
	app.loadOtherArt();
	
	$(".tab li").click(function () {
        $(this).addClass("active").siblings().removeClass("active")
        $(".tab-content").find("ul").hide();
        $(".tab-content").find("ul").eq($(this).index()).show()
    })

    /* $(".navbar-header").mouseover(function(){
    	$(".menu").slideDown("slow");
    });
	 $(".menu-wrap").mouseover(function(){
    	$(".menu").stop().show();
    }); 
	$(".menu-wrap").mouseout(function(){
    	$(".menu").slideUp("slow");
    }) */
</script>

</body>
</html>
